<template>
  <el-container class="home_container">
    <el-header></el-header>
    <el-container>
      <!-- 侧边栏区域 -->
      <el-aside width="20rem">
        <el-menu background-color="#f8f8f8" text-color="#2D3148" router :default-active="activePath">
          <div class="header_logo">
            <img class="logo" src="../../assets/images/logo-aside.svg"/>
          </div>
          <el-menu-item index="/Overview" class="single-item">
            <template slot="title">
              <span class="list_icon">
                <img src="../../assets/images/data-icon.svg" alt="">
              </span>
              <span>数据概览</span>
            </template>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <span class="list_icon">
                <img src="../../assets/images/data-icon.svg" alt="">
              </span>
              <span>数据管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/DevelopedPage">
                <template slot="title">
                  <span>待脱敏数据</span>
                  <span class="dataList">{{numFormat(dataList.toBeAnonymized)}}</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/AnonymizeData">
                <template slot="title">
                  <span>脱敏数据</span>
                  <span class="dataList">{{numFormat(dataList.anonymized)}}</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/SceneData">
                <template slot="title">
                  <span>场景片段</span>
                  <span class="dataList">{{numFormat(dataList.dataScene)}}</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/DevelopedPage">
                <template slot="title">
                  <span>CornerCase</span>
                  <span class="dataList">{{numFormat(dataList.cornerCase)}}</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <span class="list_icon">
                <img src="../../assets/images/model-icon.svg" alt="">
              </span>
              <span>模型训练</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/TrainingDataset">
                <template slot="title">
                  <span>训练数据集</span>
                  <span class="dataList">{{numFormat(dataList.trainSet)}}</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/Algorithm">
                <template slot="title">
                  <span>算法管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/TrainingTask">
                <template slot="title">
                  <span>训练任务</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/Model">
                <template slot="title">
                  <span>模型管理</span>
                </template>
              </el-menu-item>     
              <el-menu-item index="/DevelopedPage">
                <template slot="title">
                  <span>模型评估</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <span class="list_icon">
                <img src="../../assets/images/simulationTest-icon.svg" alt="">
              </span>
              <span>仿真测试</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/DevelopedPage">
                <template slot="title">
                  <span>评测数据集</span>
                  <span class="dataList">{{numFormat(dataList.testSet)}}</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/DevelopedPage">
                <template slot="title">
                  <span>总览页</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/DevelopedPage">
                <template slot="title">
                  <span>仿真用例</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/DevelopedPage">
                <template slot="title">
                  <span>仿真任务</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <span class="list_icon">
                <img src="../../assets/images/scene-icon.svg" alt="">
              </span>
              <span>场景交易</span>
            </template>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <span class="list_icon">
                <img src="../../assets/images/userCenter.svg" alt="">
              </span>
              <span>用户中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/DevelopedPage">
                <template slot="title">
                  <span>用户设置</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/DevelopedPage">
                <template slot="title">
                  <span>系统设置</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/Event">
                <template slot="title">
                  <span>事件列表</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/Alarm">
                <template slot="title">
                  <span>告警列表</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 主体区域 -->
      <el-main>
        <!-- 路由 -->
        <router-view />
      </el-main>
    </el-container>  
  </el-container>    
</template>

<script>
export default {
  data() {
    return {
      activePath: '/Overview',
      dataList:{toBeAnonymized:12749,anonymized:84684,dataScene:846150,cornerCase:8461,trainSet:8461,testSet:8461}
    }
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 退出登录
    handleUserSetting(command) {
      if (command === 'loginout') {
        this.$url.post('logout')
          .then(res => {
            if (res.status === 200) {
              this.$message.success('退出成功')
              this.$router.push({ path:'/Login'})
              this.$stor.del('X-CSRFToken')
            }
          })
      }
    },
    // 获取侧边栏数据
    getDataList() {

    }
  }
}
</script>

<style lang="less">
.home_container {
  width: 100%;
  height: 2000px;
    .el-header {
    width: 100%;
    height: 0;
    display: none;
  }
  // 侧边栏样式
  .el-aside {
    height: 100%;
    background-color: #fff;
    border-right: 1px solid #e9ebf1;
    .el-menu {
      border-right: none;
      .header_logo {
        height: 90px;
        width: 260px;
        margin: 0 30px;
        border-bottom: 1px solid #E9EBF1;
        .logo {
          width:144px;
          height:36px;
          margin: 32px 0 22px 2px;
        }
      }
    }
    .el-submenu__title {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: Bold;
      color: #131416 !important;
      padding-left: 70px !important;
    }
    // 导航栏鼠标悬停时背景色
    .el-submenu__title:hover, .el-menu-item:focus, .el-menu-item:hover {
      background-color: #dfe1e4 !important;
    }
    .el-submenu__title i {
      color: #575d6c;
      right: 40px;
    }
    .list_icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      margin-right: 10px;
      img {
        width: 100%;
      }
    }
    .el-submenu__title * {
      margin-left: -14px;
    }
    .el-menu-item {
      font-family: Microsoft YaHei, Microsoft YaHei-Normal;
      font-weight: Normal;
      color: #131416;
      font-size: 14px;
      padding-left: 30px !important;
      padding-right: 42px;
    }
    .el-menu-item.is-active {
      color: #15141c !important;
      border: none;
    }
    .dataList {
      color: #a1a1a1;
      float: right;
    }
    // 数据概览
    .single-item {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: Bold;
      color: #131416;
      padding-left: 41px !important;
    }
    .el-menu-item-group {
      margin-left: 50px;
      border-left: 1px solid #e9ebf1;
      .el-menu-item-group__title {
        display: none;
      }
    }
  }
}
</style>
